<template>
	<view class="shop-card" @click="ClickCard">
		<!-- 商品展示卡片 -->
		
		<!-- height: CustomIndex % 2 == 0 ? '484rpx' : '526rpx',先注释掉 -->
		<view
			class=" b-box d-flex flex-c ali-i-s just-s  bg-ff"
			:style="{
				
				top: CustomIndex % 2 == 0 && CustomIndex !== 0 ? '-42rpx' : '0rpx'
			}"
			style="width: 346rpx;border-radius: 16rpx;overflow: hidden;margin-bottom: 10rpx;"
		>
			<view
				style="width: 346rpx;height: 346rpx;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;overflow: hidden;margin-bottom: 20rpx;"
			>
				<image :src="staffList.image" style="width: 346rpx;height: 346rpx;"></image>
			</view>
			<view class="w-100" style="padding: 0 20rpx;margin-bottom: 8rpx;">
				<text
					style="width: 306rpx;color: #262626;font-size: 30rpx;"
					class="text-ep-2 pf-sc fw-500 wrap"
				>
					{{ staffList.name }}
				</text>
			</view>
			<view class="w-100" style="padding: 0 20rpx;">
				<text
					style="width: 306rpx;color: #FF5C00;font-size: 26rpx;"
					class="text-ep-1 pf-sc fw-600 "
				>
					¥{{ staffList.price }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		staffList: {
			type: Object,
			default: function() {
				return {};
			}
		},
		CustomIndex: {
			type: Number,
			required: true
		}
	},
	data() {
		return {};
	},
	methods: {
		ClickCard() {
			this.$emit('click', this.staffList);
			//跳转到商品详情
			uni.navigateTo({
				url: `/userModelA/userC/GoodsDetails/GoodsDetails?id=${this.staffList.id}`
			});
		}
	}
};
</script>

<style lang="scss">
.shop-card {
	.wrap{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
.u-tabs{
	margin-left: 150rpx !important; 
}
</style>
